import PropTypes from 'prop-types'
import React from 'react'
// import CSSModules from '../../lib/CSSModules'
// import styles from './ToggleModeButton.styl'
import i18n from '../../lib/i18n'
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
import ButtonGroup from '@material-ui/core/ButtonGroup';
const ToggleModeButton = ({ onClick, editorType }) => {
  console.log(editorType);
  return (
  <Tooltip arrow title={i18n.__('Toggle Mode')} placement="right">
  <ButtonGroup>
    <Button variant="contained" 
      onClick={() => onClick('SPLIT')}
    >
      <img style={{width:"15px"}}
        src={  editorType != 'SPLIT'?     
             '../resources/icon/icon-mode-markdown-off-active.svg'
             :'../resources/icon/icon-mode-markdown-off.svg'
        }
      />
    </Button>
    <Button variant="contained" 
      className={editorType === 'EDITOR_PREVIEW' ? 'active' : undefined}
      onClick={() => onClick('EDITOR_PREVIEW')}
    >
      <img style={{width:"15px"}}
        src={editorType != 'EDITOR_PREVIEW'?
             '../resources/icon/icon-mode-split-on-active.svg'
             :'../resources/icon/icon-mode-split-on.svg'
        }
      />
    </Button>
  </ButtonGroup>
  </Tooltip>)
};

ToggleModeButton.propTypes = {
  onClick: PropTypes.func.isRequired,
  editorType: PropTypes.string.isRequired
}

export default ToggleModeButton;// CSSModules(ToggleModeButton, styles)
